<template>
  <!-- 项目策划执行情况 -->

  <a-form-model
    ref="ruleForm"
    :model="planproblemVO"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
    :rules="editModel == 0 ? {} : rules"
  >
    <a-spin :spinning="loading">
      <!-- 表单 -->

      <title-name title="节点、劳动力管控问题"></title-name>
      <!-- <a-button class="mb12" type="primary" icon="plus" :disabled="editModel == 0" @click="addVosNode">新增</a-button> -->
      <s-table
        bordered
        ref="table1"
        :page-keys="['pageNum', 'pageSize']"
        tableLayout="fixed"
        size="default"
        rowKey="code"
        :columns="controlProblem"
        :data="VosNodeData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
      >
        <template
          v-for="col in ['problem', 'correctiveAction', 'completeTime', 'remarks']"
          :slot="col"
          slot-scope="text, record"
        >
          <div
            :key="col"
            class="form-item"
          >
            <BaseTextarea
              v-if="col === 'problem' || col == 'correctiveAction'"
              v-model="record[col]"
              :disabled="isDisabled(record, col)"
              :maxLength="1000"
            />
            <a-date-picker
              v-if="col === 'completeTime'"
              v-model="record[col]"
              :disabled="isDisabled(record, col)"
              placeholder="请选择"
              value-format="YYYY-MM-DD"
            />
            <BaseTextarea
              v-if="col === 'remarks'"
              :class="col === 'remarks' ? 'remark' : ''"
              v-model="record[col]"
              :disabled="editModel == 0"
              :maxLength="1000"
            />
          </div>
        </template>
        <template
          slot="action"
          slot-scope="text, record"
        >
          <a-popconfirm
            title="确定要删除?"
            @confirm="delVosNode(record)"
          >
            <a :disabled="editModel == 0 || record.status == 1">删除</a>
          </a-popconfirm>
        </template>
      </s-table>
      <title-name
        class="mt12"
        title="分包、分供招采问题"
      ></title-name>
      <!-- <a-button class="mb12" type="primary" icon="plus" :disabled="editModel == 0" @click="addVosSub">新增</a-button> -->
      <s-table
        bordered
        ref="table2"
        :page-keys="['pageNum', 'pageSize']"
        tableLayout="fixed"
        size="default"
        rowKey="code"
        :columns="miningProblem"
        :data="VosSubData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
      >
        <template
          v-for="col in ['problem', 'correctiveAction', 'completeTime', 'remarks']"
          :slot="col"
          slot-scope="text, record"
        >
          <div
            :key="col"
            class="form-item"
          >
            <BaseTextarea
              :maxLength="1000"
              v-if="col === 'problem' || col == 'correctiveAction'"
              :disabled="isDisabled(record, col)"
              v-model="record[col]"
            />
            <a-date-picker
              v-if="col === 'completeTime'"
              v-model="record[col]"
              :disabled="isDisabled(record, col)"
              placeholder="请选择"
              value-format="YYYY-MM-DD"
            />
            <BaseTextarea
              :maxLength="1000"
              v-if="col === 'remarks'"
              :class="col === 'remarks' ? 'remark' : ''"
              v-model="record[col]"
              :disabled="editModel == 0"
            />
          </div>
        </template>
        <template
          slot="action"
          slot-scope="text, record"
        >
          <a-popconfirm
            title="确定要删除?"
            @confirm="delVosSub(record)"
          >
            <a :disabled="editModel == 0 || record.status == 1">删除</a>
          </a-popconfirm>
        </template>
      </s-table>
      <title-name
        class="mt12"
        title="技术、设计问题"
      ></title-name>
      <!-- <a-button class="mb12" type="primary" icon="plus" :disabled="editModel == 0" @click="addVosTechnology">新增</a-button> -->
      <s-table
        bordered
        ref="table3"
        :page-keys="['pageNum', 'pageSize']"
        tableLayout="fixed"
        size="default"
        rowKey="code"
        :columns="designProblems"
        :data="VosTechnologyData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :showPagination="false"
      >
        <template
          v-for="col in ['problem', 'correctiveAction', 'completeTime', 'remarks']"
          :slot="col"
          slot-scope="text, record"
        >
          <div
            :key="col"
            class="form-item"
          >
            <BaseTextarea
              v-if="col === 'problem' || col == 'correctiveAction'"
              v-model="record[col]"
              :disabled="isDisabled(record, col)"
              :maxLength="1000"
            />
            <a-date-picker
              v-if="col === 'completeTime'"
              v-model="record[col]"
              :disabled="isDisabled(record, col)"
              placeholder="请选择"
              value-format="YYYY-MM-DD"
            />
            <BaseTextarea
              v-if="col === 'remarks'"
              :class="col === 'remarks' ? 'remark' : ''"
              v-model="record[col]"
              :disabled="editModel == 0"
              :maxLength="1000"
            />
          </div>
        </template>
        <template
          slot="action"
          slot-scope="text, record"
        >
          <a-popconfirm
            title="确定要删除?"
            @confirm="delVosTechnology(record)"
          >
            <a :disabled="editModel == 0 || record.status == 1">删除</a>
          </a-popconfirm>
        </template>
      </s-table>
      <!-- <div class="mt12 mb12" style="color: chocolate">请先填写【项目策划考核】</div> -->
      <!-- <div>注：此处的执行情况数据来自审批通过的【项目策划考核月度汇总】</div> -->
      <!-- 页脚操作栏 -->
      <div
        class="btn_box tool-btns--fixed"
        style="bottom: 50px"
        v-if="editModel != 0"
      >
        <a-button
          class="button_right"
          type="primary"
          @click="() => $emit('previousStep')"
        >上一步</a-button>
        <a-button
          type="primary"
          @click="() => $emit('nextStep')"
        >下一步</a-button>
      </div>
    </a-spin>
  </a-form-model>
</template>

<script>
import { api } from '@/api/project/performanceAnalysis'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BSelect from '@/components/BComponents/BSelect'

import { controlProblem, miningProblem, designProblems, colspan, colspanProjectName } from '../model.js'

export default {
  name: 'planningPerform',
  extends: new BaseEditPage(),
  components: {
    BSelect
  },

  data() {
    this.controlProblem = controlProblem
    this.designProblems = designProblems
    this.miningProblem = miningProblem
    return {
      loading: false, // 加载控件
      editModel: 1, // 操作状态:0 查看;1 编辑
      planproblemVO: { planproblemVosNode: [], planproblemVosSub: [], planproblemVosTechnology: [] },
      VosNodeData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.planproblemVO.planproblemVosNode.filter((i) => !i.isDeleted) || []
          })
        })
      },
      VosSubData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.planproblemVO.planproblemVosSub.filter((i) => !i.isDeleted) || []
          })
        })
      },
      VosTechnologyData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.planproblemVO.planproblemVosTechnology.filter((i) => !i.isDeleted) || []
          })
        })
      },
      rules: { month: [{ required: true, message: '请选择' }] }, // 校验规则
      init: false // 初始化控件
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.editModel = 0
          })
        }
      }
    }
  },
  computed: {},
  mounted() {
    this.planproblemVO = this.form.planproblemVO
    //初始化表头
    this.initColumns()

    this.$refs.table1.refresh(true)
    this.$refs.table2.refresh(true)
    this.$refs.table3.refresh(true)
  },

  methods: {
    initColumns() {
      this.controlProblem[1].customRender = (text, row, index) => {
        return colspan(
          text,
          row,
          index,
          this.planproblemVO.planproblemVosNode.filter((i) => !i.isDeleted),
          'projectName'
        )
      }
      this.controlProblem[2].customRender = (text, row, index) => {
        return colspanProjectName(
          text,
          row,
          index,
          this.planproblemVO.planproblemVosNode.filter((i) => !i.isDeleted),
          'projectName'
        )
      }
      this.miningProblem[1].customRender = (text, row, index) => {
        return colspan(
          text,
          row,
          index,
          this.planproblemVO.planproblemVosSub.filter((i) => !i.isDeleted),
          'projectName'
        )
      }
      this.miningProblem[2].customRender = (text, row, index) => {
        return colspanProjectName(
          text,
          row,
          index,
          this.planproblemVO.planproblemVosSub.filter((i) => !i.isDeleted),
          'projectName'
        )
      }
      this.designProblems[1].customRender = (text, row, index) => {
        return colspan(
          text,
          row,
          index,
          this.planproblemVO.planproblemVosTechnology.filter((i) => !i.isDeleted),
          'projectName'
        )
      }
      this.designProblems[2].customRender = (text, row, index) => {
        return colspanProjectName(
          text,
          row,
          index,
          this.planproblemVO.planproblemVosTechnology.filter((i) => !i.isDeleted),
          'projectName'
        )
      }
    },
    isDisabled(record, col) {
      if (this.editModel == 0) {
        return true
      }
      if (record.status == 1 || this.editModel == 0) {
        if (new Date(record.completeTime).getTime() < new Date().getTime() && col == 'correctiveAction') {
          return false
        }
        return true
      }
    },
    delVosNode(record) {
      record.isDeleted = 1
      // this.planproblemVO.planproblemVosNode.splice(index, 1)
      this.$refs.table1.refresh()
    },
    delVosSub(record) {
      record.isDeleted = 1
      // this.planproblemVO.planproblemVosSub.splice(index, 1)
      this.$refs.table2.refresh()
    },
    delVosTechnology(record) {
      record.isDeleted = 1
      // this.planproblemVO.planproblemVosTechnology.splice(index, 1)
      this.$refs.table3.refresh()
    },
    addVosNode() {
      this.planproblemVO.planproblemVosNode.push({
        problem: '',
        correctiveAction: '',
        completeTime: '',
        remarks: '',
        type: 1
      })
    },
    addVosSub() {
      this.planproblemVO.planproblemVosSub.push({
        problem: '',
        correctiveAction: '',
        completeTime: '',
        remarks: '',
        type: 2
      })
    },
    addVosTechnology() {
      this.planproblemVO.planproblemVosTechnology.push({
        problem: '',
        correctiveAction: '',
        completeTime: '',
        remarks: '',
        type: 3
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;

    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }

  .remark {
    .ant-input {
      border-color: inherit;
      background-color: initial;
    }
  }
}
</style>